function visualizeBarChart(data, graph, properties, divId) {
    var plottedData = null;
    var graphGroups = [];
    var ticks = [];
    var maxNoOfGaps = 6;
    var interactive= false;
    var legendDivId = divId;
    var suffixForValueHover = "";
    var suffixForLabelForHover = "";

    var noOfGraphGroups = parseInt(data.length);
    var gapsInBetween = (noOfGraphGroups >= maxNoOfGaps) ? 3 : (maxNoOfGaps - noOfGraphGroups);
    
    if (properties['interactive']) {
        interactive = true;
    }
    
    if (properties['suffixForValueHover']) {
        suffixForValueHover = " "+properties['suffixForValueHover'];
    }
    if (properties['suffixForLabelForHover']) {
        suffixForLabelForHover = properties['suffixForLabelForHover']+" ";
    }

    for (var i in data) {
        plottedData = [];
        var index = parseInt(i);
        
        for (var j in data[i]) {
            var item = [index, data[i][j]];
            plottedData.push(item);

            index += (noOfGraphGroups + gapsInBetween);
        }

        graphGroups.push({
            data: plottedData,
            label: graph.legend.labels[i]
        });
        
    }
    
    var tickStartAt = 1 * 0.5 * noOfGraphGroups;
    var noOfTicks = (data.length > 0) ? data[0].length : 0; 
    for (i = 0; i <= noOfTicks; i++) {
        ticks.push([tickStartAt, graph.xAxisLabels[i]]);
        tickStartAt += (noOfGraphGroups + gapsInBetween);
    }

    var chartOptions = {
            bars: {
            show: true,            
            barWidth: graph.barWidth,
            fill: graph.barOpacity
        },
        xaxis: {
            show: true,
            ticks: ticks,
            tickLength: 0
        },
        yaxis: {
            show: true,
            min: graph.yAxisMinValue,
            max: graph.yAxisMaxValue,
            minTickSize: graph.yAxisMinTickSize
        },
        legend: {
            show: true,
            noColumns: graph.legend.noOfColumns
        },
        grid: {
        hoverable: interactive
        }
        
    };
    
    if( graph.legend.legendDivId){
        legendDivId = graph.legend.legendDivId;        
    }
    
    if (graph.legend.useSeparateContainer) {
        var legendContainer = {
            legend: {
                container: '#' + legendDivId + '_legend'
            }
        }; 
        
        $.extend(true, chartOptions, legendContainer);        
    }
    
    $.plot($("#" + divId), graphGroups, chartOptions);
    
    
    $("#" + divId).bind("plothover", barHover);

 
    function barHover(event, pos, obj) {
        if (!obj){
            $("#hover_"+divId).html("");
            return;
        }
        value = obj.series.datapoints.points[1];
        
        $("#hover_"+divId).html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+': '+suffixForLabelForHover+value+suffixForValueHover+' </span>');
    }
}
